<template>
	<view style="height: 100vh;position: relative; background-color: #1f2025;" class="content">
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList">
			<view slot="top">
				<cu-custom :isBack="true" :bgColor="'bg-080808'" :backColor="'text-white'">
					<block slot="backText"><view class="text-white ">退款管理</view></block>
				</cu-custom>
				<view id="head" class="" style="background-color: #080808;color: #fff;font-size: 26rpx;">
					<scroll-view scroll-x class=" nav">
						<view class="flex text-center">
							<view
								class="cu-item flex-sub"
								:class="index == TabCur ? 'text-orange cur' : ''"
								v-for="(item, index) in ['待审核', '已审核']"
								:key="index"
								@click="tabSelect"
								:data-id="index"
							>
								{{ item }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="grarg" style="background-color: #1f2025;">
				<view class="cu-card">
					<view
						@click="$goPage('./AppointmentProgress?id=' + item.id)"
						class="cu-item shadow padding-sm"
						style="background-color: #292929;position: relative;color: #fff;"
						v-for="(item, index) in dataList"
						:key="index"
					>
						<view>
							<view class="flex justify-between">
								<view>用户昵称：{{ item.nickname }}</view>
								<view class="">
									<text class="text-bold">退款状态</text>
									：
									<text class="text-bold text-green">{{ item.status === 2 ? '审核中' : '' }}{{ item.platform_status === 1 ? '退款成功' : '' }}</text>
									<text class="text-bold text-red">{{ item.platform_status === 2 ? '退款失败' : '' }}</text>
								</view>
							</view>
							<view>用户ID：{{ item.userId }}</view>
							<view>剧本名称：{{ item.playName }}</view>
							<view>支付方式：{{ item.payType === 0 ? '余额' : '' }}{{ item.payType === 1 ? '微信' : '' }}</view>
							<view>支付金额：{{ item.price }}元</view>
							<view>支付时间：{{ item.pay_time }}</view>
							<view>
								审核状态：{{ item.store_status === 0 ? '商家审核中' : '' }}{{ item.store_status === 1 ? '我已同意' : ''
								}}{{ item.store_status === 2 ? '我已拒绝' : '' }} {{ item.store_status != 0 && item.platform_status === 0 ? '平台审核中' : ''
								}}{{ item.platform_status === 1 ? '平台同意' : '' }}{{ item.platform_status === 2 ? '平台拒绝' : '' }}
							</view>
							<view class="flex justify-between padding-tb-xs" v-show="TabCur === 0">
								<button class="cu-btn round bg-red sm" @click="shenhe(2, item.orderNo)">拒绝</button>
								<button class="cu-btn round bg-yellow sm" @click="shenhe(1, item.orderNo)">同意</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<empty-view slot="empty">
				<view class="text-center text-gray" style="padding-top: 400rpx;">
					<image src="../../static/icon/kong.png" style="width: 320rpx;height: 240rpx;" mode=""></image>
					<view>暂无待审核</view>
				</view>
			</empty-view>
		</z-paging>
	</view>
</template>

<script>
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
export default {
	//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
	mixins: [ZPagingMixin],
	data() {
		return {
			TabCur: 0,
			dataList: [] //列表
		};
	},
	methods: {
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
			this.$refs.paging.reload();
		},
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			this.$u.adminApi
				.getExit({
					page: pageNo,
					number: pageSize,
					storeId: this.vuex_bussinessId,
					select: this.TabCur
				})
				.then(res => {
					this.$refs.paging.complete(res.data);
				});
		},
		shenhe(status, orderNo) {
			this.$u.adminApi
				.shenhe({
					status: status,
					orderNo: orderNo
				})
				.then(res => {
					if (res.code === 200) {
						this.$textToast(res.message);
						this.$refs.paging.reload();
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.zd {
	position: absolute;
	top: 0;
	left: 0;
	width: 60rpx;
	height: 55rpx;
	z-index: 1;
}

// .grarg {
// 	position: absolute;
// 	top: 225rpx;
// 	bottom: 100rpx;
// }

.box_whbrc {
	width: 90rpx;
	height: 60rpx;
	border-radius: 30rpx;
	// background-color: #cfa526;
	margin-right: 20rpx;
	text-align: center;
	line-height: 60rpx;
}

.bgc_cfa526 {
	background-color: #cfa526;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_H {
	display: inline-block;
}
</style>
